<template>
    <el-row :gutter="20">
        <!-- 左边树形结构 -->
        <el-col :span="6">
            <div style="background-color: white; padding: 1%">
                <el-button type="primary" style="margin: 1%" @click="addShow(0, 1)">
                    <template #icon>
                        <icon name="el-icon-Plus" />
                    </template>
                </el-button>
                <el-tree
                    :data="treeData"
                    node-key="id"
                    default-expand-all
                    @node-click="handleNodeClick"
                >
                    <template class="custom-tree-node" v-slot="{ node, data }">
                        <div
                            style="
                                display: flex;
                                justify-content: space-between;
                                align-items: center;
                                width: 100%;
                                padding: 2%;
                            "
                        >
                            <!-- 左侧的节点名称 -->
                            <span>{{ node.label }}</span>
                            <!-- 右侧的按钮 -->
                            <span style="display: flex; gap: 50px">
                                <el-button type="text" size="mini" @click.stop="addShow(node)"
                                    >添加</el-button
                                >
                                <el-button type="text" size="mini" @click.stop="del(node.data.Id)"
                                    >删除</el-button
                                >
                            </span>
                        </div>
                    </template>
                </el-tree>
            </div>
        </el-col>

        <!-- 右边表格 -->
        <el-col :span="18">
            <el-table :data="tableData" style="width: 100%">
                <el-table-column
                    v-if="tableData.some((row) => row.plate)"
                    prop="plate"
                    label="板块"
                    width="180"
                    align="center"
                />
                <el-table-column
                    v-if="tableData.some((row) => row.name)"
                    prop="name"
                    label="分类名称"
                    align="center"
                />
                <el-table-column
                    v-if="tableData.some((row) => row.productName)"
                    prop="productName"
                    label="项目名称"
                    align="center"
                />
                <el-table-column
                    v-if="tableData.some((row) => row.productType)"
                    prop="productType"
                    label="产品类别"
                    align="center"
                />
                <el-table-column
                    v-if="tableData.some((row) => row.itemType)"
                    prop="itemType"
                    label="项目类别"
                    align="center"
                />
                <el-table-column
                    v-if="tableData.some((row) => row.certification)"
                    prop="certification"
                    label="资质类型"
                    align="center"
                />
                <el-table-column
                    v-if="tableData.some((row) => row.certificate)"
                    prop="certificate"
                    label="证书"
                    align="center"
                />
                <el-table-column
                    v-if="tableData.some((row) => row.province)"
                    prop="province"
                    label="省份"
                    align="center"
                />
                <el-table-column
                    v-if="tableData.some((row) => row.level)"
                    prop="level"
                    label="级别"
                    align="center"
                />
                <el-table-column
                    v-if="tableData.some((row) => row.careerName)"
                    prop="careerName"
                    label="职业名称"
                    align="center"
                />
                <el-table-column
                    v-if="tableData.some((row) => row.careerDirection)"
                    prop="careerDirection"
                    label="职业方向"
                    align="center"
                />
                <el-table-column
                    v-if="tableData.some((row) => row.intercontinental)"
                    prop="intercontinental"
                    label="洲际"
                    align="center"
                />
                <el-table-column
                    v-if="tableData.some((row) => row.country)"
                    prop="country"
                    label="国家"
                    align="center"
                />
                <el-table-column
                    v-if="tableData.some((row) => row.patentType)"
                    prop="patentType"
                    label="专利类型"
                    align="center"
                />
                <el-table-column
                    v-if="tableData.some((row) => row.serverProduct)"
                    prop="serverProduct"
                    label="服务项目"
                    align="center"
                />
                <el-table-column label="操作" width="120" fixed="right">
                    <template #default="{ row }">
                        <el-button
                            v-perms="['article:cate:edit']"
                            type="primary"
                            link
                            @click="getDetile(row)"
                        >
                            编辑
                        </el-button>
                        <el-button
                            v-perms="['article:del']"
                            type="danger"
                            link
                            @click="del(row.id)"
                        >
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="block">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    v-model:current-page="currentPage1"
                    :page-sizes="[10, 20, 30, 40, 50]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                >
                </el-pagination>
            </div>
        </el-col>
    </el-row>
    <el-dialog :title="title" v-model="dialogVisible" width="60%">
        <div>
            <el-form label-width="120px">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="板块">
                            <el-input
                                v-model="productFrom.plate"
                                placeholder="请输入板块"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="分类名称">
                            <el-input
                                v-model="productFrom.name"
                                placeholder="请输入分类名称"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="上级分类">
                            <div style="display: flex" @click="fig = true">
                                <el-input
                                    disabled
                                    v-model="productFrom.productTypeName"
                                    placeholder="请选择上级分类"
                                ></el-input>
                                <el-button
                                    style="width: 100px"
                                    @click="fig = true"
                                    v-if="productFrom.parentId != 0"
                                    >选择</el-button
                                >
                            </div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="项目名称">
                            <el-input
                                v-model="productFrom.productName"
                                placeholder="请输入项目名称"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="产品类别">
                            <el-input
                                v-model="productFrom.productType"
                                placeholder="请输入产品类别"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="项目类别">
                            <el-input
                                v-model="productFrom.itemType"
                                placeholder="请输入项目类别"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="资质类型">
                            <el-input
                                v-model="productFrom.certification"
                                placeholder="请输入资质类型"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="证书">
                            <el-input
                                v-model="productFrom.certificate"
                                placeholder="请输入证书"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="省份">
                            <el-input
                                v-model="productFrom.province"
                                placeholder="请输入省份"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="级别">
                            <el-input
                                v-model="productFrom.level"
                                placeholder="请输入级别"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="职业名称">
                            <el-input
                                v-model="productFrom.careerName"
                                placeholder="请输入职业名称"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="职业方向">
                            <el-input
                                v-model="productFrom.careerDirection"
                                placeholder="请输入职业方向"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="洲际">
                            <el-input
                                v-model="productFrom.intercontinental"
                                placeholder="请输入洲际"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="国家/地区">
                            <el-input
                                v-model="productFrom.country"
                                placeholder="请输入国家/地区"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="专利类型">
                            <el-input
                                v-model="productFrom.patentType"
                                placeholder="请输入专利类型"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="服务项目">
                            <el-input
                                v-model="productFrom.serverProduct"
                                placeholder="请输入服务项目"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveParentList">确 定</el-button>
        </span>
    </el-dialog>
    <el-dialog title="选择父分类" v-model="fig" width="60%">
        <div>
            <el-row>
                <el-col>
                    <span>选择一级分类:</span>
                    <el-select v-model="value" @change="getLists">
                        <el-option
                            v-for="item in treeData1"
                            :label="item.name"
                            :key="item.id"
                            :value="item.id"
                        ></el-option>
                    </el-select>
                </el-col>
            </el-row>
            <el-row>
                <el-col>
                    <el-table :data="tableData1" style="width: 100%">
                        <el-table-column
                            v-if="tableData1.some((row) => row.plate)"
                            prop="plate"
                            label="板块"
                            width="180"
                            align="center"
                        />
                        <el-table-column
                            v-if="tableData1.some((row) => row.name)"
                            prop="name"
                            label="分类名称"
                            align="center"
                        />
                        <el-table-column
                            v-if="tableData1.some((row) => row.productName)"
                            prop="productName"
                            label="项目名称"
                            align="center"
                        />
                        <el-table-column
                            v-if="tableData1.some((row) => row.productType)"
                            prop="productType"
                            label="产品类别"
                            align="center"
                        />
                        <el-table-column
                            v-if="tableData1.some((row) => row.itemType)"
                            prop="itemType"
                            label="项目类别"
                            align="center"
                        />
                        <el-table-column
                            v-if="tableData1.some((row) => row.certification)"
                            prop="certification"
                            label="资质类型"
                            align="center"
                        />
                        <el-table-column
                            v-if="tableData1.some((row) => row.certificate)"
                            prop="certificate"
                            label="证书"
                            align="center"
                        />
                        <el-table-column
                            v-if="tableData1.some((row) => row.province)"
                            prop="province"
                            label="省份"
                            align="center"
                        />
                        <el-table-column
                            v-if="tableData1.some((row) => row.level)"
                            prop="level"
                            label="级别"
                            align="center"
                        />
                        <el-table-column
                            v-if="tableData1.some((row) => row.careerName)"
                            prop="careerName"
                            label="职业名称"
                            align="center"
                        />
                        <el-table-column
                            v-if="tableData1.some((row) => row.careerDirection)"
                            prop="careerDirection"
                            label="职业方向"
                            align="center"
                        />
                        <el-table-column
                            v-if="tableData1.some((row) => row.intercontinental)"
                            prop="intercontinental"
                            label="洲际"
                            align="center"
                        />
                        <el-table-column
                            v-if="tableData1.some((row) => row.country)"
                            prop="country"
                            label="国家"
                            align="center"
                        />
                        <el-table-column
                            v-if="tableData1.some((row) => row.patentType)"
                            prop="patentType"
                            label="专利类型"
                            align="center"
                        />
                        <el-table-column
                            v-if="tableData1.some((row) => row.serverProduct)"
                            prop="serverProduct"
                            label="服务项目"
                            align="center"
                        />
                        <el-table-column label="操作" width="120" fixed="right">
                            <template #default="{ row }">
                                <el-button
                                    v-perms="['article:cate:edit']"
                                    type="primary"
                                    link
                                    @click="select(row)"
                                >
                                    选择
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="block">
                        <el-pagination
                            @size-change="handleSizeChange1"
                            @current-change="handleCurrentChange1"
                            v-model:current-page="currentPage2"
                            :page-sizes="[10, 20, 30, 40, 50]"
                            :page-size="pageSize2"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total2"
                        >
                        </el-pagination>
                    </div>
                </el-col>
            </el-row>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="fig = false">取 消</el-button>
            <el-button type="primary" @click="saveParentList">确 定</el-button>
        </span>
    </el-dialog>
</template>

<script lang="ts" setup>
import { reactive, onMounted, ref } from 'vue'
import selectParent from './selectParent.vue'
import { ElTree, ElTable, ElTableColumn, ElRow, ElCol, ElMessage } from 'element-plus'
import {
    getProductCategoryList,
    getParentList,
    delParentList,
    addParentList,
    getInfo,
    updateParentList
} from '@/api/productCategory'
import { getRoutePath } from '@/router'

const treeData = reactive([])
const treeData1 = reactive<any>([])
const tableData = reactive([])
const tableData1 = reactive([])
const fig = ref<boolean>(false)
const treeId = ref<number>(1)
const total2 = ref<number>(0)
const total = ref<number>(0)
const currentPage1 = ref<number>(1)
const pageSize = ref<number>(10)
const currentPage2 = ref<number>(1)
const pageSize2 = ref<number>(10)
const title = ref<string>('新增分类')
const dialogVisible = ref<boolean>(false)
const productFrom = reactive({})
const value = ref<number>(2)
onMounted(() => {
    getList()
    getParentLists()
    getLists(1)
})

const select = (row) => {
    console.log(row)
    if (row.name != null) {
        productFrom.productTypeName = row.name
    } else if (row.productType != null) {
        productFrom.productTypeName = row.productType
    } else if (row.certification != null) {
        productFrom.productTypeName = row.certification
    } else if (row.province != null) {
        productFrom.productTypeName = row.province
    } else if (row.careerName != null) {
        productFrom.productTypeName = row.careerName
    } else if (row.intercontinental != null) {
        productFrom.productTypeName = row.intercontinental
    } else if (row.country != null) {
        productFrom.productTypeName = row.country
    }

    productFrom.parentId = row.id
    fig.value = false
}
//获取分类详情
const getDetile = async (id) => {
    title.value = '编辑分类'
    dialogVisible.value = true
    const res = await getInfo(id.id)
    Object.assign(productFrom, res)
}
//新增/修改分类
const saveParentList = async () => {
    let res = {}
    if (title.value == '编辑分类') {
        res = await updateParentList(productFrom)
        ElMessage({
            message: '编辑成功',
            type: 'success'
        })
    } else {
        res = await addParentList(productFrom)
        ElMessage({
            message: '新增成功',
            type: 'success'
        })
    }
    getParentLists()
    getList()
    dialogVisible.value = false
}
//显示分类
const addShow = (obj, fig?) => {
    dialogVisible.value = true
    if (fig == 1) {
        title.value = '新增父分类'
        productFrom.productTypeName = '无'
        productFrom.parentId = 0
    } else {
        title.value = '新增分类'
        productFrom.productTypeName = obj.data.label
        productFrom.parentId = obj.data.Id
    }
}
//获取父分类
const getParentLists = async () => {
    const res = await getParentList(0)
    treeData.splice(0, treeData.length)
    treeData1.splice(0, treeData.length)
    treeData1.push({ name: '一级分类', id: 0 })
    res.forEach((item) => {
        treeData1.push(item)
        treeData.push({
            label: item.name,
            Id: item.id
        })
    })
}
//删除分类
const del = async (id) => {
    ElMessageBox.confirm('确定删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(async () => {
        const res = await delParentList(id)
        ElMessage({
            message: '删除成功',
            type: 'success'
        })
        getParentLists()
        getList()
    })
}
//分页
const handleSizeChange = (val) => {
    pageSize.value = val
    getList()
}
const handleCurrentChange = (val) => {
    currentPage1.value = val
    getList()
}

const handleSizeChange1 = (val) => {
    pageSize2.value = val
    getLists()
}
const handleCurrentChange1 = (val) => {
    currentPage2.value = val
    getLists()
}
const getLists = async (val) => {
    const params = { pageNo: currentPage2.value, pageSize: pageSize2.value } // 示例分页参数// 示例分类 ID
    const res = await getProductCategoryList(params, value.value)
    tableData1.splice(0, tableData.length)
    total2.value = res.count
    res.lists.forEach((item) => {
        tableData1.push(item)
    })
}

const getList = async () => {
    const params = { pageNo: currentPage1.value, pageSize: pageSize.value } // 示例分页参数// 示例分类 ID
    const res = await getProductCategoryList(params, treeId.value)
    tableData.splice(0, tableData.length)
    total.value = res.count
    res.lists.forEach((item) => {
        tableData.push(item)
    })
}
const handleNodeClick = (nodeData: any) => {
    productFrom.productTypeName = nodeData.label
    treeId.value = nodeData.Id
    getList()
}
</script>

<style scoped>
.app {
    padding: 20px;
}

.el-row {
    margin-top: 20px;
}
</style>
